<!-- TeacherList.vue -->
<template>
  <el-card class="teacher-list-card">
    <template #header>
      <div class="card-header">
        <span>任课教师列表</span>
      </div>
    </template>
    <div class="teacher-grid">
      <el-card v-for="teacher in teachers" :key="teacher.id" class="teacher-card">
        <div class="teacher-info">
          <div class="teacher-name">{{ teacher.name }}</div>
          <div class="teacher-subject">{{ teacher.subject }}教师</div>
          <div class="teacher-contact">
            <div>电话: {{ teacher.phone }}</div>
            <div>邮箱: {{ teacher.email }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </el-card>
</template>

<script setup>
defineProps({
  teachers: {
    type: Array,
    required: true
  }
})
</script>

<style scoped>
.teacher-list-card {
  margin-bottom: 20px;
}

.teacher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.teacher-card {
  transition: all 0.3s;
}

.teacher-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.teacher-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.teacher-subject {
  color: #666;
  margin-bottom: 10px;
}

.teacher-contact {
  font-size: 14px;
  color: #888;
  line-height: 1.5;
}
</style>